<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<div style="padding: 10px">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" lay-verify="required" name="role">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" lay-verify="required" name="roleName">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>权限</legend>
        </fieldset>
        <div class="layui-form-item" name="perms"></div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitRole">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["form", "jquery", "layer"], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;

        $(document).ready(function () {
            let loadIndex = null;
            $.ajax({
                url: "/getPermissions",
                dataType: "json",
                type: "get",
                beforeSend: function () {
                    loadIndex = layer.load();
                },
                success: function (responseData) {
                    console.log(responseData.data);
                    $("div[name=perms]").html("");
                    for (let i = 0; i < responseData.data.length; i++) {
                        $("div[name=perms]").append("<input type='checkbox' name='" + responseData.data[i].permission + "' value='" + responseData.data[i].permissionId + "' title='" + responseData.data[i].permissionName + "'>");
                    }
                    form.render();
                    layer.close(loadIndex);

                },
                error: function () {
                    layer.close(loadIndex);
                    layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                }
            });
        });

        form.on("submit(submitRole)", function (data) {
            console.log(data.field);
            $.ajax({
                url: "/executeAddRole",
                data: data.field,
                dataType: "json",
                type: "post",
                success: function (responseResult) {
                    if (responseResult.code == 1) {
                        layer.msg(responseResult.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(responseResult.msg, {icon: 7, time: 1000});
                    }
                },
                error: function () {
                    layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>